<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSV Reader popup</title>
    <link rel="stylesheet" href="css/popup.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="csv-reader-popup">
      <h2>Convert this CSV into something readable</h2>
      <form>
        <div id="fields">
          <p>
            <label for="separator">What is the separator?</label>
            <input
              type="text"
              name="separator"
              id="separator"
              placeholder=","
              autofocus
            />
          </p>
          <p>
            <input type="checkbox" name="title-line" id="title-line" />
            <label for="title-line">Check if there is a first title line</label>
          </p>
          <p>
            <label for="skip-lines">Number of lines to skip at the top</label>
            <input
              type="number"
              name="skip-lines"
              id="skip-lines"
              placeholder="0"
            />
          </p>
          <p>
            <input type="checkbox" name="has-links" id="has-links" />
            <label for="has-links">Check if there are links in the data</label>
          </p>
        </div>
        <div id="buttons">
          <button type="submit" id="convert">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <polyline points="6 21 21 6 18 3 3 18 6 21" />
              <line x1="15" y1="6" x2="18" y2="9" />
              <path
                d="M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"
              />
              <path
                d="M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"
              />
            </svg>
            <span>Convert</span>
          </button>
          <button type="submit" id="color-code">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M22 17c0 -5.523 -4.477 -10 -10 -10s-10 4.477 -10 10" />
              <path d="M18 17a6 6 0 1 0 -12 0" />
              <path d="M14 17a2 2 0 1 0 -4 0" />
            </svg>
            <span>Color code!</span>
          </button>
          <button
            type="submit"
            id="json-export"
            disabled
            title="title line required"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M14 3v4a1 1 0 0 0 1 1h4" />
              <path
                d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
              />
              <line x1="12" y1="11" x2="12" y2="17" />
              <polyline points="9 14 12 17 15 14" />
            </svg>
            <span>JSON Export</span>
          </button>
        </div>
        <hr />
        <p id="reset-container">
          Or go back to the original CSV
          <button id="reset">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
              <path d="M0 0h24v24H0z" stroke="none" />
              <path
                d="M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 002 2h8a2 2 0 002-2l1-12M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3"
              />
            </svg>
            Reset
          </button>
        </p>
      </form>
    </div>

    <div id="error-content" class="hidden">
      <p>This doesn't seem to work here, please try a different page...</p>
      <br />
      <p>Feeling daring?</p>
      <div class="buttons">
        <button id="try-anyway">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 24 24"
            style="transform: rotate(-15deg)"
          >
            <path d="M0 0h24v24H0z" stroke="none" />
            <rect x="4" y="4" width="16" height="16" rx="2" />
            <circle cx="8.5" cy="8.5" r=".5" fill="currentColor" />
            <circle cx="15.5" cy="8.5" r=".5" fill="currentColor" />
            <circle cx="15.5" cy="15.5" r=".5" fill="currentColor" />
            <circle cx="8.5" cy="15.5" r=".5" fill="currentColor" />
          </svg>
          Try anyway! (but no promises)
        </button>
      </div>
      <hr />
      <p>
        Is this an error? Please
        <a
          href="https://github.com/rubenvar/csv-reader/issues"
          target="_blank"
          rel="nofollow noopener noreferrer"
          >report it</a
        >.
      </p>
    </div>

    <script
      type="application/javascript"
      src="/polyfills/browser-polyfill.min.js"
    ></script>
    <script src="popup.js"></script>
  </body>
</html>
